<template>
<div>
  <div class="plant_castle">
    <h2>Flora植物城堡</h2>
    <el-form v-model="searchForm" :inline="true">
      <el-row>
        <el-col :span="8" >
          <el-form-item label="植物名："prop="title" style="margin-left: 0px;">
            <el-input v-model="searchForm.plantName" placeholder="请输入植物名" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="植物种类：" prop="category" style="margin: 0;padding: 0 ">
            <el-select v-model="searchForm.categoryId" placeholder="请选择植物种类" clearable>
              <el-option
                  v-for="item in plantCategoryList"
                  :key="item.plantCategoryName"
                  :label="item.plantCategoryName"
                  :value="item.plantCategoryId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="getPlantList(searchForm)">查询</el-button>
      </el-row>
      <el-row>
        <el-col :span="8" style="left: 200px"v-for="(plant,index) in plantList" :key="'plant'+plant.plantId">
          <!--              <div v-if="num<plantList.length">{{getPlantCategoryStr(plant.categoryId)}}</div>-->
          <div class="plantListBox">
            <section>
              <div>
                <el-form>
                  <el-row>
                    <el-col :span="6">
                      <el-form-item style="margin-top: 20px;margin-bottom: 20px">
                        <div style="display:grid;justify-content:start;margin-left: 10px">
                          <img v-if="plant.avatar" :src="plant.avatar" width="150" height="200" style="border-radius: 30px">
                          <img v-else src="../../../assets/img/bgImg/plant2.png" width="150" height="200">
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-row type="flex" justify="left" >
                        <el-form-item style="margin-top: 10px;margin-bottom: 0;margin-left: 90px">
                          <div class="plant_name_tag" style="display:grid;justify-content:start;width:100px;height: 20px"><h3>名字: {{plant.plantName}}</h3></div>
                        </el-form-item>
                      </el-row>
                      <el-row>
                      </el-row>
                      <el-row>
                        <el-form-item style="margin-top: 10px;margin-bottom: 0;margin-left: 90px">
                          <div class="plant_status_tag" style="display:grid;justify-content:start;width:100px;height: 20px">
                            <h3>状态: {{ plant.status }}</h3></div>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item style="margin-top: 10px;margin-bottom: 0;margin-left: 90px">
                          <div class="plant_status_tag" style="display:grid;justify-content:start;width:100px;height: 20px">
                            <h3>获赞数: {{ plant.likeCount }}</h3></div>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                        <el-form-item style="margin-top: 90px;margin-bottom: 0;margin-left: 90px">
                            <el-button
                              class="el-icon-view"
                              type="primary"
                              size="mini"
                              plain
                              @click="$refs.plantDialog.open(plant)"
                              style="border: white;margin-top: 10px"
                          >查看</el-button>
                        </el-form-item></el-col>
                        <el-col :span="12">
                        <el-form-item style="margin-top: 90px;margin-bottom: 0;margin-left:150px">
                            <el-button
                                class="el-icon-magic-stick"
                                type="danger"
                                size="mini"
                                plain
                                @click="updateLikeCount(plant.plantId)"
                                style="border: white;margin-top: 10px"
                            >点赞</el-button>
                        </el-form-item></el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </section>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <plant-dialog ref="plantDialog" title="植物信息"></plant-dialog>
</div>
</template>

<script>
import {getPlantCategoryList} from "@/api/plantCategory";
import {getPlants, updateLikeCount} from "@/api/plant";
import plantDialog from "@/components/page/community/plantDialog";
export default {
  name: "PlantCastle",
  components:{
    plantDialog
  },
  data(){
    return{
      searchForm:{
        plantName:'',
        categoryId:''
      },
      plantCategoryList:[],
      plantList:[1,2,3]

    }

  },
  created() {
    this.routeChange()
  },
  methods:{
    getPlantCategory(){
      getPlantCategoryList().then(res=>{
        this.plantCategoryList=res.records
      })
    },
    getPlantList(params){
      console.log(params)
        getPlants(params).then(res=>{
          console.log(res.records)
          this.plantList=res.records
        })
    },
    routeChange(){
      this.getPlantCategory()
      this.getPlantList(this.searchForm)
    },
    updateLikeCount(plantId){
      updateLikeCount(plantId).then(res=>{
        this.$message.success('点赞成功！');
        console.log("点赞量更新")
      })
    }
  }

}
</script>

<style scoped>
.plantListBox{
  position: relative;
}
.plantListBox section {
  transition: all 0.2s linear;
  position: relative;
  background: #fff;
  padding: 1px;
  margin-bottom: 50px;
  margin-left: 80px;
  border-radius: 5px;
  right: 50px;
  top: 23px;
  bottom: 0px;
}
.plantListBox section:hover {
  transform: translate(0, -2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
</style>